<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习页面</title>
    <link rel="stylesheet" href="css/style.css"> 
</head>
<body>
    <div class="header_top">
        <div class="header_top_logo"></div>
        <div class="header_top_title">
            <a class="header_top_title_one" href="#">首页</a>
            <a href="#">课程</a>
            <a href="#">职业规划</a>
        </div>
        <div class="header_top_search">
            <input class="header_top_search_input" type="text" placeholder="输入关键字">
            <div class="header_top_search_img"></div>
        </div>
        <div class="header_top_user">
            <img src="images/user.png" alt="">
            qq-leishui
        </div>
    </div>
    <div class="header_center">
        <div class="header_main">
            <div class="header_main_left">
                <ui>
                    <li><a href="#">前端开发<span>&gt</span></a></li>
                    <li><a href="#">后端开发<span>&gt</span></a></li>
                    <li><a href="#">移动开发<span>&gt</span></a></li>
                    <li><a href="#">人工智能<span>&gt</span></a></li>
                    <li><a href="#">商业预测<span>&gt</span></a></li>
                    <li><a href="#">云计算&大数据<span>&gt</span></a></li>
                    <li><a href="#">运维&测试<span>&gt</span></a></li>
                    <li><a href="#">UI设计<span>&gt</span></a></li>
                    <li><a href="#">产品<span>&gt</span></a></li>
                </ui>
            </div>
            <div class="header_main_right">
                <div class="main_right_title">
                    <h2>我的课程表</h2>
                </div>
                <div class="main_right_main">
                    <ui>
                        <li>
                            <h3>继续学习 程序语义设计</h3>
                            <p>正在学习-使用对象</p>
                            </li>
                        <li>
                            <h3>继续学习 程序语义设计</h3>
                            <p>正在学习-使用对象</p>
                        </li>
                        <li>
                            <h3>继续学习 程序语义设计</h3>
                            <p>正在学习-使用对象</p>
                        </li>
                    </ui>
                    <a  href="#">全部课程</a>
                </div>
            </div>
        </div>
    </div>
    <div class="header_bottom">
        <div class="header_bottom_left">
            <h2>精品推荐</h2>
        </div>
        <div class="header_bottom_main">
            <ui>
                <li><a href="#">JQuery</a></li>
                <li><a href="#">Spark</a></li>
                <li><a href="#">MySQL</a></li>
                <li><a href="#">JavaWeb</a></li>
                <li><a href="#">MySQL</a></li>
                <li><a href="#">JavaWeb</a></li>
            </ui>        
        </div>
        <div class="header_bottom_right">
            <a href="#">修改兴趣</a>
        </div>
    </div>
    <div class="main">
        <div class="main_top">
            <h2>精品推荐</h2>
            <a href="#">查看全部</a>
        </div>
        <div class="main_bottom">
            <ui>
                <li><a href="#">
                    <img src="./images/pic.png" alt="">
                    <p>Think PHP 5.0 博客系统实战项目演练</p>
                    <p>高级 • 1125人在学习</p>
                    <div class="main_bottom_hot"></div>
                    </a>
                </li>
                <li><a href="#">
                    <img src="./images/pic.png" alt="">
                    <p>Think PHP 5.0 博客系统实战项目演练</p>
                    <p>高级 • 1125人在学习</p>
                    </a>
                </li>
                <li><a href="#">
                    <img src="./images/pic.png" alt="">
                    <p>Think PHP 5.0 博客系统实战项目演练</p>
                    <p>高级 • 1125人在学习</p>
                    </a>
                </li>
                <li><a href="#">
                    <img src="./images/pic.png" alt="">
                    <p>Think PHP 5.0 博客系统实战项目演练</p>
                    <p>高级 • 1125人在学习</p>
                    </a>
                </li>
                <li><a href="#">
                    <img src="./images/pic.png" alt="">
                    <p>Think PHP 5.0 博客系统实战项目演练</p>
                    <p>高级 • 1125人在学习</p>
                    </a>
                </li>
                <li><a href="#">
                    <img src="./images/pic.png" alt="">
                    <p>Think PHP 5.0 博客系统实战项目演练</p>
                    <p>高级 • 1125人在学习</p>
                    </a>
                </li>
                <li><a href="#">
                    <img src="./images/pic.png" alt="">
                    <p>Think PHP 5.0 博客系统实战项目演练</p>
                    <p>高级 • 1125人在学习</p>
                    </a>
                </li>
                <li><a href="#">
                    <img src="./images/pic.png" alt="">
                    <p>Think PHP 5.0 博客系统实战项目演练</p>
                    <p>高级 • 1125人在学习</p>
                    </a>
                </li>
                <li><a href="#">
                    <img src="./images/pic.png" alt="">
                    <p>Think PHP 5.0 博客系统实战项目演练</p>
                    <p>高级 • 1125人在学习</p>
                    </a>
                </li>
                <li><a href="#">
                    <img src="./images/pic.png" alt="">
                    <p>Think PHP 5.0 博客系统实战项目演练</p>
                    <p>高级 • 1125人在学习</p>
                    </a>
                </li>
            </ui>
        </div>
    </div>
    <div class="footer">1</div>
    
</body>
</html>